<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="./ReButton.css">
  <script src="../../layui/layui.js"></script>
  <style>
    .layui-menu-item-checked::after {
      display: none;
    }

    .layui-menu-item-checked * {
      color: green;
    }

    .layui-panel {
      box-shadow: none;
    }
  </style>
  <style>
    a {
      color: blueviolet;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css">
  <script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
</head>

<body style="display: flex;align-items: flex-start;padding-bottom: 20px;box-sizing: border-box;">
  <div style="width: 100%;">
    <h1>按钮</h1>
    <hr>
    <blockquote class="layui-elem-quote">
      <p>纯 <code>CSS</code> 的一套模仿 <code>element UI</code> 的按钮</p>
      <span>下载文件：</span>
      <a target="_blank" download href="./ReButton.css">ReButton.css</a>&nbsp;&nbsp;或&nbsp;&nbsp;
      <a target="_blank" download href="./ReButton.scss">ReButton.scss</a>
    </blockquote>
    <br><br>

    <h2 id="Btn">基本按钮</h2>
    <hr>
    <pre class="layui-code btn-box">
<button class="re-btn">基本按钮</button>&nbsp;&nbsp;
<button class="re-btn primary">主要按钮</button>&nbsp;&nbsp;
<button class="re-btn success">成功按钮</button>&nbsp;&nbsp;
<button class="re-btn info">信息按钮</button>&nbsp;&nbsp;
<button class="re-btn warning">警告按钮</button>&nbsp;&nbsp;
<button class="re-btn danger">危险按钮</button>
<br><br>
<button disabled class="re-btn">禁用按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn primary">主要按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn success">成功按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn info">信息按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn warning">警告按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn danger">危险按钮</button>
<br><br>
<button class="re-btn circle">
  <i class="iconfont icon-search"></i>
</button>&nbsp;&nbsp;
<button class="re-btn primary circle">
  <i class="iconfont icon-edit2"></i>
</button>&nbsp;&nbsp;
<button class="re-btn success circle">
  <i class="iconfont icon-correct"></i>
</button>&nbsp;&nbsp;
<button class="re-btn info circle">
  <i class="iconfont icon-email"></i>
</button>&nbsp;&nbsp;
<button class="re-btn warning circle">
  <i class="iconfont icon-collection"></i>
</button>&nbsp;&nbsp;
<button class="re-btn danger circle">
  <i class="iconfont icon-delete"></i>
</button>
  </pre>
    <br><br>

    <h2 id="Plain">朴素按钮</h2>
    <hr>
    <pre class="layui-code btn-box">
<button class="re-btn plain">朴素按钮</button>&nbsp;&nbsp;
<button class="re-btn primary plain">主要按钮</button>&nbsp;&nbsp;
<button class="re-btn success plain">成功按钮</button>&nbsp;&nbsp;
<button class="re-btn info plain">信息按钮</button>&nbsp;&nbsp;
<button class="re-btn warning plain">警告按钮</button>&nbsp;&nbsp;
<button class="re-btn danger plain">危险按钮</button>
<br><br>
<button disabled class="re-btn plain">禁用按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn primary plain">主要按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn success plain">成功按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn info plain">信息按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn warning plain">警告按钮</button>&nbsp;&nbsp;
<button disabled class="re-btn danger plain">危险按钮</button>
  </pre>

    <br><br>

    <h2 id="Round">圆角按钮</h2>
    <hr>
    <pre class="layui-code btn-box">
<button class="re-btn round">圆角按钮</button>&nbsp;&nbsp;
<button class="re-btn primary round">主要按钮</button>&nbsp;&nbsp;
<button class="re-btn success round">成功按钮</button>&nbsp;&nbsp;
<button class="re-btn info round">信息按钮</button>&nbsp;&nbsp;
<button class="re-btn warning round">警告按钮</button>&nbsp;&nbsp;
<button class="re-btn danger round">危险按钮</button>
  </pre>


    <br><br>

    <h2 id="BtCc">不同尺寸</h2>
    <hr>
    <pre class="layui-code btn-box">
<button class="re-btn">默认按钮</button>&nbsp;&nbsp;
<button class="re-btn medium">中等按钮</button>&nbsp;&nbsp;
<button class="re-btn small">小型按钮</button>&nbsp;&nbsp;
<button class="re-btn mini">迷你按钮</button>&nbsp;&nbsp;
<br><br>
<button class="re-btn round">默认按钮</button>&nbsp;&nbsp;
<button class="re-btn medium round">中等按钮</button>&nbsp;&nbsp;
<button class="re-btn small round">小型按钮</button>&nbsp;&nbsp;
<button class="re-btn mini round">迷你按钮</button>&nbsp;&nbsp;
  </pre>


    <br><br>

    <h2 id="BtCc">图标按钮</h2>
    <hr>
    <pre class="layui-code btn-box">
<div style="display: flex;">
  <button class="re-btn primary">
    <i class="iconfont icon-collection"></i>
  </button>&nbsp;&nbsp;
  <!-- 不加 flex 文字和图标对不齐  -->
  <button class="re-btn primary flex">
    <i style="margin-right: 5px;" class="iconfont icon-search"></i>搜索
  </button>&nbsp;&nbsp;
  <button class="re-btn primary flex">
    上传文件<i style="margin-left: 5px;" class="iconfont icon-upload"></i>
  </button>
</div>
    </pre>

  </div>




  <div class="layui-panel left-box" style="width: 200px; margin-left: 16px;position: sticky;top: 0;">
    <ul class="layui-menu" id="demo-menu">
      <li class="layui-menu-item-group" lay-options="{type: 'parent', isAllowSpread: false}">
        <ul>
          <li class="layui-menu-item-checked">
            <a href="#Btn">
              <div class="layui-menu-body-title">基本按钮</div>
            </a>
          </li>
          <li class="">
            <a href="#Plain">
              <div class="layui-menu-body-title">朴素按钮</div>
            </a>
          </li>
          <li class="">
            <a href="#Round">
              <div class="layui-menu-body-title">圆角按钮</div>
            </a>
          </li>
          <li class="">
            <a href="#BtCc">
              <div class="layui-menu-body-title">不同尺寸</div>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</body>
<script>
  layui.code({
    elem: '.btn-box',
    preview: true,
    layout: ['preview', 'code'],
    lang: "html",
    highlighter: "hljs",
    langMarker: true,
    codeRender: function (code, opts) {
      return hljs.highlight(code, { language: opts.lang }).value;
    }
  });
</script>

</html>